<!-- 综合能耗分析 -->
<template>
    <div class="mainContent">
        <el-form ref="ruleForm" :model="form" label-width="117px" class="form">
            <el-row>
                <el-col :span="5">
                    <el-form-item label="设备类别：">
                        <el-select v-model="form.sblb" placeholder="请选择设备类别">
                            <el-option label="电" value="dian"></el-option>
                            <el-option label="水" value="shui"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="总分表级别：">
                        <el-select v-model="form.zfbjb" placeholder="请选择总分表级别">
                            <el-option label="1级" value="1"></el-option>
                            <el-option label="2级" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="padding-left: 2%">
                    <el-form-item label="区域建筑/部门：">
                        <el-select v-model="form.depart" placeholder="请选择区域建筑/部门">
                            <el-option label="部门1" value="1"></el-option>
                            <el-option label="部门2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="能耗分项：">
                        <el-select v-model="form.nhfx" placeholder="请选择能耗分项">
                            <el-option label="照明插座" value="1"></el-option>
                            <el-option label="照明插座2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="建筑类别：">
                        <el-select v-model="form.jzlb" placeholder="请选择建筑类别">
                            <el-option label="公共教学" value="dian"></el-option>
                            <el-option label="公共教学1" value="shui"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="统计时段：">
                        <el-select v-model="form.tjsd" placeholder="请选择统计时段">
                            <el-option label="早上" value="1"></el-option>
                            <el-option label="中午" value="2"></el-option>
                            <el-option label="晚上" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="padding-left: 2%">
                    <el-form-item label="对比维度：">
                        <el-select v-model="form.dbwd" placeholder="请选择对比维度">
                            <el-option label="年同比" value="1"></el-option>
                            <el-option label="年同比2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="时间对比：">
                        <el-date-picker v-model="form.value1" type="date" placeholder="请选择年月日" style="width: 140px"> </el-date-picker>
                        对比
                        <el-date-picker v-model="form.value2" type="date" placeholder="请选择年月日" style="width: 140px"> </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="是否工作日：">
                        <el-select v-model="form.sfgzr" placeholder="请选择是否工作日">
                            <el-option label="工作日" value="dian"></el-option>
                            <el-option label="工作日2" value="shui"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="统计单位：">
                        <el-select v-model="form.tjdw" placeholder="请选择统计单位">
                            <el-option label="用量" value="1"></el-option>
                            <el-option label="用量1" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="padding-left: 2%">
                    <el-form-item label="统计指标：">
                        <el-select v-model="form.tjzb" placeholder="请选择统计指标">
                            <el-option label="总能耗" value="1"></el-option>
                            <el-option label="总能耗2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">分析</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="bottomContent">
            <div class="leftContent">
                <img src="@/assets/images/logoBlack.png" class="logo" />
                <div>
                    <label for="">综合能耗分析</label>
                    <img src="@/assets/images/controlCenter/refresh.png" />
                </div>
                <PieEcharts></PieEcharts>
            </div>
            <div class="rightContent">
                <div class="rightTitle">
                    <span>综合能耗分析</span>

                    <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                    <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label>
                </div>
                <img src="@/assets/images/controlCenter/refresh.png" class="refresh" />
                <BarEcharts></BarEcharts>
            </div>
        </div>
    </div>
</template>

<script>
import PieEcharts from './components/pieEcharts.vue'
import BarEcharts from './components/barEcharts'
export default {
    name: 'cECAnalysis',
    components: {PieEcharts, BarEcharts},
    data() {
        return {
            form: {
                value1: '',
                value2: '',
                sblb: '',
                depart: '',
                zfbjb: '',
                nhfx: '',
                jzlb: '',
                tjsd: '',
                dbwd: '',
                sfgzr: '',
                tjdw: '',
                tjzb: ''
            }
        }
    },
    computed: {},
    created() {},
    methods: {
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.mainContent {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
    text-align: left;

    .form {
        padding-top: 20px;
    }
    .form,
    .bottomContent,
    .leftContent,
    .rightContent {
        background-color: #fff;
    }
    .bottomContent {
        height: calc(100% - 198px);
        border: 1px solid #eee;
        border-radius: 6px;
        display: flex;
        gap: 10px;
        background-color: rgb(245, 245, 245);
        .leftContent {
            width: 400px;
            padding: 10px;
            border-right: 1px solid #eee;
            .logo {
                width: 200px;
            }
            div {
                height: 35px;
                line-height: 35px;
                margin-top: 40px;
                label {
                    font-size: 16px;
                    float: left;
                    margin-left: 20px;
                }
                img {
                    float: right;
                    margin-right: 20px;
                    width: 20px;
                    margin-top: 9px;
                    cursor: pointer;
                }
            }
        }
        .rightContent {
            position: relative;
            flex: 1;
            padding: 10px;
            .refresh {
                position: absolute;
                width: 20px;
                right: 20px;
                cursor: pointer;
            }
            .rightTitle {
                text-align: center;
                height: 60px;
                line-height: 60px;
                margin-bottom: 50px;
                span {
                    text-align: center;
                    font-weight: bold;
                    font-size: 18px;
                }
                label {
                    text-align: right;
                    float: right;
                    color: #3b8cfc;
                    margin-right: 15px;
                    cursor: pointer;
                    font-size: 16px;
                }
                .printer {
                    color: #3b8cfc;
                }
                .download {
                    color: #3b8cfc;
                }
            }
        }
    }
}
</style>
